<template>
    <div id="map">
        <div id="left">
        </div>
        <div id="right">
        </div>
    </div>
</template>

<script>
    import {Map, View} from 'ol'
    import {OSM,XYZ} from 'ol/source';
    import {Tile} from 'ol/layer';
    import TileLayer  from 'ol/layer/WebGLTile';

    export default {
        name: "MultiView",
        data(){
            return{

            }
        },
        mounted() {
            //初始化地图
            this.leftMap = new Map({
                target: 'left',//指定挂载dom，注意必须是id
                layers: [
                    new Tile({
                        source: new OSM()//加载OpenStreetMap
                    }),
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });

            var rightMap = new Map({
                layers: [
                    new Tile({
                        title:"天地图路网",
                        crossOrigin:"anonymous",
                        wrapX:false,
                        source: new XYZ({
                            url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5',
                        }),
                    }),

                    new Tile({
                        title: "天地图文字标注",
                        attributions:"天地图的属性描述",
                        wrapX: false,
                        source: new XYZ({
                            url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5'
                        }),
                    })
                ],
                target: 'right', //地图容器div的ID
                view: this.leftMap.getView() //设置为主图的视图对象
            });

        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    #left{
        width: 50%;
        height: 100%;
    }
    #right{
        width: 50%;
        height: 100%;
    }
</style>